
<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="searchParam.name" />
      </el-form-item>
      <el-form-item label="Code">
        <el-input v-model="searchParam.code" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addRowVisible()">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="Code" />
      <el-table-column prop="git_url" label="Git地址">
        <template slot-scope="scope">
          <span v-if="scope.row.git_url">{{ scope.row.git_url }}</span>
          <span v-else-if="scope.row.project_git_url">
            <el-tooltip content="继承" placement="top">
              <div class="el-icon-info" />
            </el-tooltip>
            {{ scope.row.project_git_url }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="git_branch" label="Git主分支" :render-header="handleRenderHeader">
        <template slot-scope="scope">
          <span v-if="scope.row.git_master_branch">{{ scope.row.git_master_branch }}</span>
          <span v-else-if="scope.row.project_git_master_branch">
            <el-tooltip content="继承" placement="top">
              <div class="el-icon-info" />
            </el-tooltip>
            {{ scope.row.project_git_master_branch }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="editRowVisible(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="delRowHandle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        ref="pagination"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tablePageSize"
        :current-page="tablePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="">
      <el-form ref="form" :model="form">
        <el-form-item
          label="业务线"
          :label-width="formLabelWidth"
          prop="business"
          :rules="[
            { required: true, message: '业务线不能为空' }
          ]"
        >
          <el-select v-model="form.business" filterable placeholder="请选择" :disabled="edit" @change="fetchProject">
            <el-option
              v-for="item in businesslist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          ref="project"
          label="项目"
          :label-width="formLabelWidth"
          prop="project"
          :rules="[
            { required: true, message: '项目不能为空' }
          ]"
        >
          <el-select v-model="form.project" filterable placeholder="请选择" :disabled="edit" @change="ff">
            <el-option
              v-for="item in projectlist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="名称"
          :label-width="formLabelWidth"
          prop="name"
          :rules="[
            { required: true, message: '名称不能为空' }
          ]"
        >
          <el-input v-model="form.name" :disabled="edit" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="Code"
          :label-width="formLabelWidth"
          prop="business"
          :rules="[
            { required: true, message: 'Code不能为空' }
          ]"
        >
          <el-input v-model="form.code" :disabled="edit" autocomplete="off" />
        </el-form-item>
        <el-divider content-position="center">以下内容如不填写，则默认继承项目配置</el-divider>
        <el-form-item label="Git" :label-width="formLabelWidth">
          <el-input v-model="form.git_url" autocomplete="off" />
        </el-form-item>
        <el-form-item label="主分支" :label-width="formLabelWidth">
          <el-input v-model="form.git_master_branch" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRowHandle('form')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addRow, delRow, editRow } from '@/api/resource/service'
// import { getBusinessSelect } from '@/api/resource/business'
import { getList as getBusiness } from '@/api/resource/business'
import { getList as getProject } from '@/api/resource/project'
export default {
  data() {
    return {
      tableData: [],
      tablePageSize: 10,
      tablePage: 1,
      tableTotal: 0,
      listLoading: true,
      searchParam: {
        path: '',
        name: '',
        page: this.tablePage,
        page_size: this.tablePageSize
      },
      // options: [],
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      businesslist: [],
      projectlist: [],
      edit: false
    }
  },
  created() {
    this.fetchData()
    this.fetchBusiness()
    this.fetchBusinessData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      // const params = { 'page': this.tablePage, 'page_size': this.tablePageSize,
      // 'name': this.searchParam.name, 'code': this.searchParam.code }
      const params = Object.assign(this.searchParam, { 'page': this.tablePage, 'page_size': this.tablePageSize })
      getList(params).then(response => {
      // console.log(this.searchParam)
      // getList(this.searchParam).then(response => {
        this.tableData = response.data
        this.tableTotal = response.total
        // this.tablePage = response.page
        // this.tablePage = Math.ceil(response.total / response.page_size)
        this.listLoading = false
      })
    },
    // fetchBusinessData() {
    //   getBusinessSelect().then(response => {
    //     this.options = response.data
    //   })
    // },
    fetchBusiness() {
      const params = { business: this.form.business, page_size: 20 }
      getBusiness(params).then(response => {
        this.businesslist = response.data
        this.form.project = ''
      })
    },
    fetchProject() {
      // console.log(this.$refs.project)
      // this.$refs.project.resetField
      // this.$refs.service.resetField
      // this.form.project = ''
      const params = { business: this.form.business, page_size: 100 }
      getProject(params).then(response => {
        this.projectlist = response.data
      })
    },
    ff() {
      console.log(this.form.project)
    },
    handleCurrentChange(page) {
      this.tablePage = page
      console.log(page, this.tablePageSize)
      this.fetchData()
    },
    handleSizeChange(pagesize) {
      this.tablePageSize = pagesize
      this.fetchData()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    addRowVisible() {
      // 解决form缓存问题
      this.edit = false
      this.form = {}
      this.dialogFormVisible = true
    },
    editRowVisible(row) {
      // this.form = {
      //   name: row.name,
      //   code: row.code,
      //   id: row.id
      // }
      this.edit = true
      this.form = Object.assign({}, row)
      this.fetchProject()
      this.dialogFormVisible = true
    },
    delRowHandle(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 执行调用删除接口
          delRow({ id: row.id }).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addRowHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          console.log(this.form.id)
          if (this.form.id !== undefined) {
            editRow(this.form.id, this.form).then(response => {
              this.$message({
                type: 'success',
                message: '编辑成功'
              })
              this.fetchData()
            })
          } else {
            addRow(this.form).then(response => {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.fetchData()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleRenderHeader(h, { column, $index }) {
      return h('el-tooltip', {
        props: {
          content: (function() {
            return '用于合并代码'
          })(),
          placement: 'top'
        },
        domProps: {
          innerHTML: column.label + '<span class="el-icon-question"></span>'
        }
      },
      [h('span')])
    }
  }
}
</script>

<style>

</style>
